<template>
	<view>
		<view v-if="banners.length > 0" class="swiper-wrapepr">
			<swiper :autoplay="autoplay" :circular="circular" :interval="3000" 
				@change="swiperChange"
				:duration="500" class="swipeer" style="height: 240px;">
				<block v-for="(item,index) in banners" :key='index'>
					<swiper-item>
						<image :src="item.url" v-if="item.isImg" class="banner"/>
						<video :src="item.url" v-if="item.isVideo" @play="start" @pause="stop" controls></video>
					</swiper-item>
				</block>
			</swiper>
			<view class="tags">
				<view class="img-tags comm" v-if="currentIndex+1 <= bannersImgLength">图片{{currentIndex+1}}/{{bannersImgLength}}</view>
				<view class="video comm" v-else>视频</view>
			</view>
		</view>
		<view class="info-box">
			<view class="left-info">
				<view class="name">{{ hotel_info.name }}</view>
				<view class="addr">{{hotel_info.address}}</view>
			</view>
			<view class="right-info">
				<view class="top" @click="goToMap">
					<image src="/static/2images/share_vr.png" class="share"></image>
					<view class="take">带我去</view>
				</view>
				<view class="bottom" @click="goToVR">
					VR查看
				</view>
			</view>
		</view>
		<!-- <view class="date-box">
			<view class="date-range">
				<view>
					<view class="tv1">5月28日</view>
					<view class="tv2">今日入住</view>
				</view>
				<view class="tv1">1晚</view>
				<view>
					<view class="tv1">5月28日</view>
					<view class="tv2">今日入住</view>
				</view>
			</view>
			<view class="foot">
				<view class="tags">
					<view class="tag">标准房</view>
					<view class="tag">大床房</view>
					<view class="tag">有窗</view>
					<view class="tag">含早餐</view>
				</view>
				<view class="more" @click="showPopup = true">更多筛选<view class="arrow place"></view></view>
			</view>
		</view> -->

		<view class="hotel-list" v-if="hotel_info.rooms">
			<view class="hotel-item" v-for="(item, index) in hotel_info.rooms" :key="index" @click="showHouseInfo(item)">
				<image class="image" :src="item.cover_img"></image>
				<view class="info">
					<view class="name">{{ item.name }}</view>
					<view class="desc">
						{{ item.bed_type }} {{item.tags}}
					</view>
					<view class="price">
						<text class="unit"></text>
						<text class="value">￥{{ item.price }}</text>
					</view>
				</view>
				<view class="yd">
					<view class="yd2">预订</view>
				</view>
			</view>
		</view>
		<view class="detail-intro" v-if="hotel_info.intro">
			<view class="name">简介</view>
			<view class="content">
				{{ hotel_info.intro }}
			</view>
		</view>
		<view class="detail-intro detail-xq" v-if="hotel_info.remark">
			<view class="name">详情</view>
			<view class="content">
				<jyf-parser :domain='domain' :html="hotel_info.remark" ref="article" :tag-style="tagStyle"></jyf-parser>
			</view>
		</view>
		<view class="phone-call" @click="onCall">
			电话预订
		</view>
		<view class="bottom-area"></view>

		<view class="overlay" v-show="showHouse">
			<view class="popup">
				<view class="house-info">
					<view @click="closeInfo" class="close">
						<image class="close-img" src="/static/2images/close.png"></image>
					</view>
					<view class="house-content">
						<view class="name">{{ house_popup_info.name }}</view>
						<view class="swiper" v-if="hosue_popup_info_banners.length > 0">
							<swiper :autoplay="false" :circular="false" :interval="3000" :duration="500" 
							:indicator-dots="true" :current="current" @change="swiperChangeInfo"
								class="swipeer" style="height: 373rpx;">
								<block v-for="(item,index) in hosue_popup_info_banners" :key='index'>
									<swiper-item>
										<image :src="item.url" v-if="item.isImg" class="info-img"/>
										<video :src="item.url" v-if="item.isVideo" controls></video>
									</swiper-item>
								</block>
							</swiper>
						</view>
						<view class="title">房间设施</view>
						<view class="sheshi" v-if="house_popup_info.fac_list.length > 0">
							<view class="sheshi-item" v-for="(item, index) in house_popup_info.fac_list" :key="index">
								<view class="sheshi-icon">
									<image class="sheshi-icon" :src="item.ico_url"></image>
								</view>
								<view class="sheshi-name">{{ item.name }}</view>
							</view>
						</view>
						<view class="title">使用规则</view>
						<view class="desc">到入住酒店核销订单，携带所有入住人的有效身份证办理入住，入住必须按照一人一证。请在14:00之前退房，如需提前入住或者延后退房需要咨询商家。</view>
						
					</view>
					<view class="footer">
						<view class="btn" @click="onCall">立即预定</view>
					</view>
					<view class="bottom-area"></view>
				</view>
			</view>
		</view>
		<view class="overlay" v-show="showPopup">
			<view class="popup">
				<view class="label">房型</view>
				<view class="tags">
					<view class="tag active">大床</view>
					<view class="tag">双床</view>
					<view class="tag">其他房型</view>
					<view class="flex-1"></view>
				</view>
				<view class="label">价格</view>
				<view class="tags wrap">
					<view class="tag active">￥0-200</view>
					<view class="tag">￥200-300</view>
					<view class="tag">￥300-500</view>
					<view class="tag">￥500-600</view>
					<view class="tag">￥600-1000</view>
					<view class="tag">￥1000以上</view>
				</view>
				<view class="label">餐食</view>
				<view class="tags">
					<view class="tag active">含早餐</view>
					<view class="tag">不含早餐</view>
					<view class="flex-1"></view>
					<view class="flex-1"></view>
				</view>
				<view class="label">窗户</view>
				<view class="tags">
					<view class="tag active">有窗</view>
					<view class="tag">无窗</view>
					<view class="flex-1"></view>
					<view class="flex-1"></view>
				</view>
				<view class="label">wifi</view>
				<view class="tags">
					<view class="tag active">有wifi</view>
					<view class="tag">无wifi</view>
					<view class="flex-1"></view>
					<view class="flex-1"></view>
				</view>
				<view class="actions">
					<view class="cancel" @click="showPopup = false;">取消</view>
					<view class="confirm">确定</view>
				</view>
			</view>
		</view>
	
		<uni-popup ref="popup" class="popup-cls">
			<view class="p-main">
				<view class="pm-top">
					<view></view>
					<view class="pmt-close" @click="closeInfo">
						<image class="pmt-c-img" src="/static/2images/close.png"></image>
					</view>
				</view><!-- pm-top -->
				<scroll-view class="pm-content" scroll-y="true">
					<view class="pm-cc">
						<view class="pm-c-name">{{ house_popup_info.name }}</view>
						<view class="pm-c-swiper" v-if="hosue_popup_info_banners.length > 0">
							<swiper :autoplay="false" :circular="false" :interval="3000" :duration="500" 
							:indicator-dots="true" :current="current" @change="swiperChangeInfo"
								class="swipeer" style="height: 373rpx;">
								<block v-for="(item,index) in hosue_popup_info_banners" :key='index'>
									<swiper-item>
										<image :src="item.url" v-if="item.isImg" class="info-img"/>
										<video :src="item.url" v-if="item.isVideo" controls></video>
									</swiper-item>
								</block>
							</swiper>
						</view><!-- swiper-->
						<view class="pm-c-attr">
							<view class="pm-c-a-name">房间设施</view>
							<view class="pm-c-a-attr" v-if="house_popup_info.fac_list.length > 0">
								<view class="sheshi-item" v-for="(item, index) in house_popup_info.fac_list" :key="index">
									<view class="sheshi-icon">
										<image class="sheshi-icon" :src="item.ico_url"></image>
									</view>
									<view class="sheshi-name">{{ item.name }}</view>
								</view>
							</view>
						</view><!-- pm-c-attr end -->
						<view class="pm-c-cont" v-if="hotel_info.remark">
							<view class="pmc-c-title">详情</view>
							<view class="pmc-c-content">
								<jyf-parser :domain='domain' :html="hotel_info.remark" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
					</view>
				</scroll-view><!--content end -->
				
				<view class="pm-bottom">
					<view class="pmb-btn">立即预约</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getHotelInfo} from "@/api/2_store";
	import parser from "@/components/jyf-parser/jyf-parser";
	import { HTTP_REQUEST_URL } from '@/config/app';

  export default {
	data() {
		return {
			showPopup: false,
			showHouse: false,
			hotel_info: {},
			house_popup_info: {},
			hosue_popup_info_banners: [],
			domain: HTTP_REQUEST_URL,
			tagStyle: {
				img: 'width:100%;display:block;'
			},
			banners: [],
			bannersImgLength: [],
			circular: true,
			autoplay: true,
			interval: 3000,
			duration: 500,
			currentSwiper: 0,
			currentIndex: 0,
			current: 0
		};
	},
	components: {
		"jyf-parser": parser
	},
    onLoad(options){
      this.id = options.id
      getHotelInfo({
        id: this.id
      }).then(res=>{
        this.hotel_info = res.data
		this.banners = []
		this.bannersImgLength = 0
		if(res.data.banners) {
			let arr = res.data.banners.split(",")
			arr = arr.map(item => {
				return {isImg: true, url: item}
			})
			this.bannersImgLength = arr.length
			this.banners.push(...arr)
		}
		if(res.data.video) {
			let arr = res.data.video.split(",")
			arr = arr.map(item => {
				return {isVideo: true, url: item}
			})
			this.banners.push(...arr)
		}
      })
    },
	methods: {
		showHouseInfo(info){
			this.house_popup_info = info
			this.hosue_popup_info_banners = []
			if(info.banners) {
				let arr = info.banners.split(",")
				arr = arr.map(item => {
					return {isImg: true, url: item}
				})
				this.hosue_popup_info_banners.push(...arr)
			}
			if(info.video) {
				let arr = info.video.split(",")
				arr = arr.map(item => {
					return {isVideo: true, url: item}
				})
				this.hosue_popup_info_banners.push(...arr)
			}
			this.$refs.popup.open('bottom');
			return;
			this.house_popup_info = info
			this.hosue_popup_info_banners = []
			if(info.banners) {
				let arr = info.banners.split(",")
				arr = arr.map(item => {
					return {isImg: true, url: item}
				})
				this.hosue_popup_info_banners.push(...arr)
			}
			if(info.video) {
				let arr = info.video.split(",")
				arr = arr.map(item => {
					return {isVideo: true, url: item}
				})
				this.hosue_popup_info_banners.push(...arr)
			}
			this.showHouse = true
		},
		onCall(){
			uni.makePhoneCall({
			  phoneNumber: this.hotel_info.contact
			})
		},
		onSubmit(){
			// uni.navigateTo({
			// 	url: '/pages/2_development/hotel/confirm'
			// })
		},
		start() {
			this.autoplay = false
		},
		stop() {
			this.autoplay = true
		},
		goToMap() {
			let {lat, lon, address} = this.hotel_info
			if(lat && lon) {
				uni.openLocation({
			   　　latitude: Number(lat), 
			   　　longitude: Number(lon),
			   　　name: address,
			   　　success() {
				   　　console.log('success');
			   　　}
				});
			}
		},
		goToVR() {
			let url = this.hotel_info.vr_url
			if(url) {
				uni.navigateTo({
				  url: `/pages/2_development/hotel/vr?url=${url}`
				})
			}
		},
		swiperChange(event){
			let index = event.detail.current
			this.currentIndex = index
		},
		swiperChangeInfo(event) {
			let index = event.detail.current
			this.current = index
		},
		closeInfo() {
			this.showHouse = false
			this.current = 0
			this.$refs.popup.close();
		}
	}
}
</script>

<style lang="scss">
	@import './style.scss';
	@import './details.scss';
	.bottom-area{
		height: 10px;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}
	.swiper-wrapepr{
		height: 240px;
		.swipeer{
			height: 240px;
		}
		.banner{
			height: 100%;
			width: 100%;
		}
		.tags{
			position: absolute;
			right: 16px;
			top: 186px;
			display: flex;
			.img-tags{
				width: 75px;
				height: 23px;
			}
			.video{
				width: 47px;
				height: 23px;
			}
			.comm{
				border-radius: 11.5px;
				background: rgba(0, 0, 0, 0.64);
				font-family: "PingFang SC Bold";
				font-weight: bold;
				font-size: 20rpx;
				text-align: center;
				color: #fff;
				line-height: 23px;
			}
		}
	}
	.info-box{
		z-index: 1;
		position: relative;
		border-radius: 15px;
		background: #fff;
		margin: 15px;
		margin-top: -22px;
		padding: 36rpx 33rpx 36rpx 33rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.left-info{
			width: 80%;
			margin-top: 2px;
			padding-left: 2px;
			margin-right: 10px;
			.name{
				font-weight: bold;
				font-size: 38rpx;
				color: #0b0b0b;
			}
			.addr{
				margin-top: 30rpx;
				font-size: 21rpx;
				color: #111;
			}			
		}
		.right-info{
			width: 55px;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 0px;
			.top{
				margin-bottom: 16px;
				text-align: center;
				.share{
					width: 39rpx;
					height: 39rpx;
				}
				.take{
					font-family: "Source Han Sans CN";
					font-weight: normal;
					font-size: 20rpx;
					text-align: right;
					color: #333;
				}
			}
			.bottom{
				width: 82rpx;
				height: 34rpx;
				border-radius: 7rpx;
				background: #fff;
				border: 0.5px solid #ff5f5f;
				font-family: "Source Han Sans CN";
				font-weight: normal;
				font-size: 21rpx;
				text-align: center;
				line-height: 34rpx;
				color: #ff5f5f;
			}
		}
	}
	.date-box{
		height: 134px;
		border-radius: 15px;
		background: #fff;
		margin: 10px 15px 15px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 18px;
		.date-range{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.tv1{
			font-weight: bold;
			font-size: 22px;
			line-height: 1;
			color: #333;
		}
		.tv2{
			font-size: 18px;
			line-height: 1;
			color: #333;
			margin-top: 15px;
		}

		.foot{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 22px;
		}
		.more{
			display: flex;
			align-items: center;
			.arrow{
				width: 9px;
				height: 9px;
			}
		}
		.tags{
			display: flex;

			.tag{
				width: 49px;
				height: 21px;
				line-height: 21px;
				margin-right: 8px;
				text-align: center;
				border-radius: 4px;
				background: rgba(153, 153, 153, 0.2);
			}
		}
	}
	.detail-intro, .imgs{
		height: 134px;
		border-radius: 15px;
		background: #fff;
		margin: 10px 15px 15px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 18px;
		.name{
			font-weight: bold;
			font-size: 27rpx;
			color: #0b0b0b;
			margin-bottom: 10px;
		}
		.content{
			
		}
	}
	.detail-xq{
		height: auto;
		word-break: break-all;
		padding-bottom: 10px;
		margin-bottom: 100rpx;
	}
	.phone-call{
		height: 78rpx;
		border-radius: 39rpx;
		background: #0193ff;
		border: 1px solid #0193ff;
		font-family: "Source Han Sans CN Bold";
		font-weight: bold;
		font-size: 28rpx;
		line-height: 78rpx;
		text-align: center;
		color: #fff;
		margin: 0px 15px;
		position: fixed;
		bottom: 10rpx;
		right: 0;
		left: 0;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.hotel-list{
		border-radius: 15px;
		background: #fff;
		margin: 10px 15px 15px;
		padding-left: 30rpx;
		padding-right: 30rpx;
		.hotel-item{
			padding-top: 18px;
			// padding-left: 15px;
			display: flex;
			padding-bottom: 18px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			position: relative;
			.image{
		
				width: 167rpx;
				height: 167rpx;
				margin-right: 24rpx;
				border-radius: 5px;
			}
			.info{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
			}
			.name{
				font-weight: bold;
				font-size: 30rpx;
				line-height: 1;
				color: #0b0b0b;
				margin-top: 3px;
			}
			.desc{
				font-size: 21rpx;
				line-height: 1;
				color: #999999;
		
			}
		
			.price{
				display: flex;
				align-items: flex-end;
				line-height: 1;
				.unit{
					font-size: 24rpx;
					color: #D82C2C;
				}
				.value{
					font-size: 36rpx;
					color: #D82C2C;
				}
				.after{
					color: #999999;
					font-size: 13px;
				}
			}
		
			.yd{
				position: absolute;
				right: 0px;
				bottom: 15px;
				.yd1{
					width: 49px;
					height: 29px;
					border-radius: 4px 4px 0 0;
					background: #d82c2c;
					font-weight: bold;
					font-size: 16px;
					line-height: 29px;
					text-align: center;
					color: #fff;
				}
				.yd2{
					width: 86rpx;
					height: 40rpx;
					border-radius: 6rpx;
					background: #fff;
					border: 1px solid #d82c2c;
					font-size: 24rpx;
					line-height: 40rpx;
					text-align: center;
					color: #d82c2c;
				}
			}
		}
		
	}
	
	
	.comment-item{
		background-color: #fff;
		display: flex;
		padding: 15px;
		position: relative;
		.avatar{
			width: 44px;
			min-width: 44px;
			height: 44px;
			border-radius: 50%;
			margin-right: 12px;
		}
		.info{
			flex: 1;
		}
		.nickname{
			font-size: 16px;
			color: #111;
		}
		.time{
			font-size: 12px;
			color: #333;
			position: absolute;
			top: 20px;
			right: 15px;
		}
		.stars{
			display: flex;
			margin-top: 8px;
		}
		.star{
			width: 19px;
			height: 19px;
		}
		.content{
			font-size: 14px;
			line-height: 22px;
			color: #111;
			margin-top: 15px;
		}
		.images{
			display: flex;
			margin-top: 15px;
		}
		.image{
			width: 85px;
			height: 85px;
			border-radius: 5px;
			margin-right: 10px;
		}
		&:not(:last-child)::after{
			content: '\20';
			display: block;
			border-bottom: 1px solid #DCDCDC;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 70px;
		}
	}

	.popup{
		top: 20%;
		height: auto;
		overflow-y: auto;
		.popup-image{
			width: 100%;
			height: 250px;
		}
	}
	.house-info{
		padding-top: 50px;
		height: 100%;
		position: relative;
		background-color: #FFFFFF;
		.close-img{
			width: 17px;
			height: 17px;
		}
		.close{
			width: 16px;
			height: 16px;
			position: absolute;
			top: 17px;
			right: 23px;
		}
		.house-content{
			position: relative;
			height: 400rpx;
			overflow-y: auto;
			.name{
				padding-left: 45rpx;
				padding-right: 45rpx;	
				font-weight: bold;
				font-size: 30rpx;
				line-height: 42rpx;
				color: #0b0b0b;
				margin-bottom: 26rpx;
			}
			.swiper{
				padding-left: 45rpx;
				padding-right: 45rpx;	
				height: 375rpx;
				border-radius: 22rpx;
				margin-bottom: 37rpx;
				.info-img{
					width: 100%;
				}
			}
			.title{
				padding-left: 45rpx;
				padding-right: 45rpx;
				font-weight: bold;
				font-size: 27rpx;
				color: #0b0b0b;
				margin-bottom: 16rpx;
			}
			.sheshi{
				padding-left: 45rpx;
				padding-right: 45rpx;	
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.sheshi-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 14px;
					width: 25%;
				}
				.sheshi-icon{
					width: 29px;
					height: 29px;
				}
				.sheshi-name{
					font-size: 21rpx;
					line-height: 1;
					color: #333;
					margin-top: 9rpx;
				}
			}
			.desc{
				font-weight: normal;
				font-size: 21rpx; 
				line-height: 36rpx;
				color: #333;
				margin-top: 27rpx;
				padding-left: 45rpx;
				padding-right: 45rpx;
				padding-bottom: 30rpx;	
			}
		}
		.footer{
			width: 100%;
			position: fixed;
			margin: 9rpx 0;
			border-top: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0rpx;
			.btn{
				width: 80%;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				border-radius: 39rpx;
				background: #0193ff;
				font-weight: bold;
				font-size: 27rpx;
				color: #fff;
			}
		}
	}
	
	

</style>
